<template>
  <div class="home">
          <!-- <el-button @click="Tout">退出登录</el-button> -->
    <div class="box">

    </div>
    <div class="echartsClass">
      <line-charts :chartData="lineData.dataTotle"></line-charts>
    </div>
    <!-- <div class="echartsClass">
     <bin-charts :chartData="binData.dataTotle"></bin-charts>     
    </div> -->
    <div   v-for="(item,index) in dd" :key="index" class="echartsClass" >
     <bin-charts :chartData="binData.dataTotle" :chartid="item"></bin-charts>     
    </div>
    <div class="echartsClass">
     <bin-charts :chartData="binData.dataTotle" :chartid="'dd3'"></bin-charts>     
    </div>
     <!-- <div class="echartsClass1">
      <line-charts :chartData="lineData.dataTotle"></line-charts>
    </div> -->
  </div>
  
</template>
<style lang="scss" scoped>      

.home {
  width: 100%;
  display: flex;
  flex-wrap: wrap
}
 .echartsClass {
  margin: 0.2rem;
  width: 40%;
  height: 40vh;
}
</style>;
<script>
import lineCharts from "@/components/lineCharts.vue";
import binCharts from "@/components/binCharts.vue";

export default {
  name: "home",
  data() {
    return {
      dd:['dd1','dd2'],
      msghome: "菜单组件111",
      lineData: {
        dataTotle: {
          text: "业务员本月销售排行榜111",
          xData: ["方管", "槽钢", "角钢", "铝锭", "圆钢", "铜棒", "钢管"],
          name: "万元",
          islegend: false, //是否显示图例
          series: [
            {
              name: "销售额",
              type: "bar",
              data: [150, 100, 175, 220, 125, 175, 125],
              barWidth: 10, //设置柱条的宽度
              isclor: true, //柱形条是否双色渐变
            },

            {
              name: "销售额环比",
              type: "line",
              yAxisIndex: 1,
              data: [225, 165, 245, 250, 180, 205, 240],
            },
          ],
        },
      },
     
     binData: {
        dataTotle: {
            title: {
            text: '某站点用户访问来源',
            subtext: "可爱的圈圈",
            left: 'center'
            },
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            color:[ '#5470c6', '#91cc75', '#fac858', '#73c0de', '#fc8452', '#9a60b4', '#ea7ccc' ],
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
        },
      },
       barheight:'40vh'
    };
  },
  methods: {
    Tout() {
      sessionStorage.clear();
      window.location.reload();
    },
  },
  components: {
    lineCharts,
    binCharts,
  },
};
</script>
